<template>
	<view class="page">
		<!-- 轮播图组件 -->
		<swpier :swiperList="swiperList"></swpier>
		<!-- 轮播组件完成 -->
		<!-- 推荐商品组件 -->
		<recommend :recommend="recommend"></recommend>
		<!-- 推荐商品组件完成 -->
		<!-- 受欢迎的 -->
		<image src="../../static/otherImage/popular.png" class="popularImage"></image>

		<!-- 切换栏 -->
		<homeTitle :title="homeTitle" @tabClick="tabClick" :class="{homeFixed:HomeFixed}"></homeTitle>

		<!-- 商品数据 -->
		<goods :goodsType="returnList"></goods>


		<!-- 返回顶部 -->
		<back-top v-show="isShowTop" :windowHeight="windowHeight"></back-top>
	</view>
</template>

<script>
	import Swpier from "../../components/swiper.vue"
	import recommend from '../../components/recommend.vue'
	import homeTitle from '../../components/homeTitle/homeTitle.vue'
	import Goods from "../../components/goods/goods.vue"
	import backTop from '../../components/backTop.vue'
	import {
		requestSwiper,
		MyRequest
	} from '../../network/HomeRequest.js';
	export default {
		name: "Index",
		components: {
			Swpier,
			recommend,
			homeTitle,
			Goods,
			backTop
		},
		data() {
			return {
				swiperList: [], // 轮播图列表
				recommend: [], // 推荐的信息，
				homeTitle: [ //  tab数据流
					{
						id: 1,
						name: "流行"
					},
					{
						id: 2,
						name: "新款"
					},
					{
						id: 3,
						name: "精选"
					},
				],
				goodsList: {
					pop: {
						page: 0,
						list: []
					},
					new: {
						page: 0,
						list: []
					},
					sell: {
						page: 0,
						list: []
					}, //精选
				},
				currrentType: "pop", // 当前的类型
				returnList: [], //  返回的商品列表
				windowHeight: 0, // 使用窗口高度
				HomeFixed: false, //  tab是否固定
				isShowTop: false, // 是否显示返回顶部

			}
		},
		onLoad() {
			//  请求轮播图数据
			this._requestSwiper()
			// 请求商品数据
			this._requestGoodDatas('pop')
			this._requestGoodDatas('new')
			this._requestGoodDatas('sell')

			// 获取可使用的设备高度
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight
				},
			})
		},
		onPullDownRefresh() {
			setTimeout(() => {
				// 数据清空
				this.returnList = []
				this.goodsList = {
					pop: {
						page: 0,
						list: []
					},
					new: {
						page: 0,
						list: []
					},
					sell: {
						page: 0,
						list: []
					}, //精选
				}
				// 请求商品数据 重新请求最新数据， 如果数据会不断的更新  那么就可以这样
				this._requestGoodDatas('pop')
				this._requestGoodDatas('new')
				this._requestGoodDatas('sell')
				uni.showToast({
					title: "正在加载...",
					icon: "loading"
				})
				uni.stopPullDownRefresh()
			}, 500)
		},
		onPageScroll(obj) {
			// 判断滚动的距离是否接近切换栏
			this.HomeFixed = obj.scrollTop - this.windowHeight >= 20;
			this.isShowTop = obj.scrollTop >= this.windowHeight * 1.5;
		},
		onReachBottom() {
			// 下拉刷新
			setTimeout(() => {
				this._requestGoodDatas(this.currrentType)
				uni.showToast({
					icon: "loading"
				})
			}, 200)


		},
		methods: {
			// 封装轮播图数据 以及推荐数据进行跳转
			_requestSwiper() {
				requestSwiper().then(res => {
					this.swiperList = res.data.data.banner.list
					this.recommend = res.data.data.recommend.list
				});
			},
			// 请求商品数据
			_requestGoodDatas(type) {
				// type, page, 
				let page = this.goodsList[type].page + 1;
				MyRequest({
					url: "/home/data",
					data: {
						page,
						type
					}
				}).then(res => {
					if (res.data.data.list) {
						this.goodsList[type].page += 1;
						this.goodsList[type].list.push(...res.data.data.list.reverse());

					} else {
						uni.setTime(() => {
							this._requestGoodDatas(type)
						}, 1000)
					}
				})
				// 初始化列表
				this.returnList = this.goodsList[this.currrentType].list
			},
			// 切换状态栏
			tabClick(index) {
				switch (index) {
					case 1:
						this.currrentType = 'pop';
						this.returnList = this.goodsList[this.currrentType].list;
						break;
					case 2:
						this.currrentType = 'new';
						this.returnList = this.goodsList[this.currrentType].list;
						break;
					case 3:
						this.currrentType = 'sell';
						this.returnList = this.goodsList[this.currrentType].list;
						break;
				}
				uni.pageScrollTo({
					scrollTop: this.windowHeight + 25
				});
			},
		
		}
	}
</script>
<style lang="less">
	.popularImage {
		width: 100%;
	}

	.homeFixed {
		position: fixed;
		transition: all .6s;

		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */

		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */

		left: 0;
		right: 100%;
		z-index: 10;
		width: 750rpx;
		background-color: #FFFFFF;

	}
</style>
